<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<style type="text/css">
h1 {
    font-family:"微软雅黑";
    font-size:40px;
    margin:20px 0;
    border-bottom:solid 1px #ccc;
    padding-bottom:20px;
    letter-spacing:2px;
    
}
.time-item strong {
    background:#C71C60;
    color:#fff;
    line-height:49px;
    font-size:36px;
    font-family:Arial;
    padding:0 10px;
    margin-right:10px;
    border-radius:5px;
    box-shadow:1px 1px 3px rgba(0,0,0,0.2);
}
#day_show {
    float:left;
    line-height:49px;
    color:#c71c60;
    font-size:32px;
    margin:0 10px;
    font-family:Arial,Helvetica,sans-serif;
}
.item-title .unit {
    background:none;
    line-height:49px;
    font-size:24px;
    padding:0 10px;
    float:left;
}
</style>
<body>
	<div class="time-item">
		<label>考试剩余时间:</label>
    	<strong id="hour_show">0时</strong>
    	<strong id="minute_show">0分</strong>
   	 	<strong id="second_show">0秒</strong>
	</div>
	
	<c:forEach items="${testList }" var="examTestVO" varStatus="status">
	<script type="text/javascript">
	if(${status.index == 0}){
		var testid = new Array(${testList.size()});
		var testtype = new Array(${testList.size()});
		}
	testid[${status.index}] = ${examTestVO.id};
	testtype[${status.index}] = ${examTestVO.examTestType.id};
	</script>
		<div class="u-questionItem" id="">
		<div class="test-title">
		  <span>${status.index + 1} 、</span><span class="type-mark">${examTestVO.examTestType.testType }</span> 
		  <span class="question-score">(${examTestVO.examTestType.testTypeScore }分)</span> 
		  <span class="title-content">${examTestVO.content }</span>
		  </div>
		  <div class="option-item"> 
		  	<ul type="none" class="option-c">
		  		<c:if test="${examTestVO.examTestType.id == '1' }">
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		<input name="${status.index}" value="A" class="u-tbi" type="radio"></span>
		  		<span> A、</span><span class="option-content">${examTestVO.chooseA }</span></li>
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		
		  		<input name="${status.index}" value="B" class="u-tbi" type="radio"></span>
		  		<span> B、</span><span class="option-content">${examTestVO.chooseB }</span></li>
		  		
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		<input name="${status.index}" value="C" class="u-tbi" type="radio"></span>
		  		
		  		<span> C、</span><span class="option-content">${examTestVO.chooseC }</span></li>
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		<input name="${status.index}" value="D" class="u-tbi" type="radio"></span>
		  		
		  		<span> D、</span><span class="option-content">${examTestVO.chooseD }</span></li>
		  		
		  		</c:if>
		  		
		  		<c:if test="${examTestVO.examTestType.id == '2' }">
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		<input name="${status.index}" value="A" class="u-tbi" type="checkbox"></span>
		  		<span> A、</span><span class="option-content">${examTestVO.chooseA }</span></li>
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		
		  		<input name="${status.index}" value="B" class="u-tbi" type="checkbox"></span>
		  		<span> B、</span><span class="option-content">${examTestVO.chooseB }</span></li>
		  		
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		<input name="${status.index}" value="C" class="u-tbi" type="checkbox"></span>
		  		
		  		<span> C、</span><span class="option-content">${examTestVO.chooseC }</span></li>
		  		<li class="option" style="background-color: rgb(255, 255, 255);"><span>
		  		<input name="${status.index}" value="D" class="u-tbi" type="checkbox"></span>
		  		
		  		<span> D、</span><span class="option-content">${examTestVO.chooseD }</span></li>
		  		
		  		</c:if>
		  		
		  		
		  		</ul>
		  		</div></div>
	</c:forEach>
	
	<div style="margin-top:20px; margin-left:40px;margin-bottom: 40px">
	<button class="btn btn-normal btn-success" id="answer_submit" style="margin-right:30px">提交试卷</button>
	</div>
	
	<script type="text/javascript">

	$("#answer_submit").click(function(){
		 if(confirm("是否马上交卷?")){
			 answerall();
			 }else{
				return ;
				 }
		
		});

	function answerall(){
		var arr = ${testList.size()};
		var answerList = new Array(arr);
		for(var i = 0 ; i<arr;i++){
			var answerString = '';
			if(testtype[i] == 1){
				answerString += $('.option-c input[name="'+i+'"]:radio:checked').val();
				} else if(testtype[i] == 2){
					var array = $('.option-c input[name="'+i+'"]:checkbox:checked');
					$.each(array,function(index, item){
						answerString += (index == 0 ? $(item).val() : (','+$(item).val()));
						});
					} else {
						alert("无效试题类型!");
						}
			answerList[i] = answerString;
			}
		var subjectId = ${testSubject.id };
		$.ajax({
			type:'POST',
			url:'${pageContext.request.contextPath}/answerTest',
			data:{
				answerList:answerList,
				testid:testid,
				subjectId:subjectId,
				},
				traditional:true,
				dataType:"json",
				success:function(data){
					if(data.success){
						alert('已交卷成功!');
						window.location.href="${pageContext.request.contextPath}/subjects";
						} else {
							alert('交卷失败!');
							}
					}
			});
		
		}
	</script>
	
	<script type="text/javascript">
	var testTime = ${testSubject.time };
	var intDiff = parseInt(testTime*60);//倒计时总秒数量
	function timer(intDiff){
    var timerun = window.setInterval(function(){
    var day=0,
        hour=0,
        minute=0,
        second=0;//时间默认值        
    if(intDiff > 0){
        day = Math.floor(intDiff / (60 * 60 * 24));
        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    }
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;
    $('#day_show').html(day+"天");
    $('#hour_show').html('<s id="h"></s>'+hour+'时');
    $('#minute_show').html('<s></s>'+minute+'分');
    $('#second_show').html('<s></s>'+second+'秒');
    intDiff--;
    if(hour == 0 && minute == 0 && second == 0){
    	answerall();
    	clearInterval(timerun);
        }
    }, 1000);
} 
$(function(){
    timer(intDiff);
}); 
</script>
</body>
</html>